<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="fl">
          <el-input size="mini" v-model="sear.keyword" placeholder="请输入操作人姓名/学工号" clearable></el-input>
        </div>
        <!-- <div class="fl ml20">
          <el-select size="mini" v-model="sear.id" placeholder="请选择角色" clearable>
            <el-option :key="index" v-for="(item,index) in extendRoleList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div> -->
        <div class="fl ml20">
          <el-button size="mini" type="primary" @click="search">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="personList" stripe style="width: 100%;margin-top:30px;">
      <el-table-column prop="date" label="序号" width="120" type="index">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="sn" label="工号/学号" width="180"></el-table-column>
      <el-table-column prop="roleName" label="角色名称">
        <template slot-scope="scope"><span>{{scope.row.roleName | formatRole}} </span></template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button @click="showRoleManageDialog(scope.row)" type="text" size="mini">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <section class="content-page" style="margin-top:50px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 15, 20, 30]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </section>
    <el-dialog title="角色管理" :visible.sync="dialogRoleManage">
      <section class="clear" style="min-width:800px">
        <el-form>
          <el-form-item label="姓名：" class="fl" style="width: 230px">
            <span>{{currentOperateItem.name}}</span>
          </el-form-item>
          <el-form-item label="工号/学号：" class="fl" style="width: 230px">
            <span>{{currentOperateItem.sn}}</span>
          </el-form-item>
        </el-form>
      </section>
      <div style="text-align: center">
        <el-transfer style="text-align: left; display: inline-block" filterable filter-placeholder="请输入搜索" @change="roleTransferChange" :props="{key: 'id',label: 'name'}" v-model="userRoles" :left-default-checked="[]" :right-default-checked="[]" :titles="['未授权角色', '授权角色']" :button-texts="['移除', '添加']" :data="allRoles">
        </el-transfer>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {people} from '@api/index'
import {findRoleByRoleQueryUsingPOST, getUserRoleBySn, deleteUserRoleBySn, addRoleForUserBySn, getMangerList} from '@api/systemManage'
export default {
  name: 'userEmpower',
  data () {
    return {
      extendRoleList: [],
      personList: [],
      dialogRoleManage: false,
      currentOperateItem: {},
      allRoles: [],
      userRoles: [],
      sear: {
        id: null,
        keyword: ''
      },
      page: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  created () {
    this.getAllRoleList()
    this.initPage()
  },
  filters: {
    formatRole: function (item) {
      if (item) {
        return item.split(',').join('、')
      } else {
        return '无'
      }
    }
  },
  methods: {
    initPage () {
      let params = {
        jobId: this.sear.id,
        filterValue: this.sear.keyword,
        orderByColumn: '',
        orderByType: '',
        pageNum: this.page.current,
        pageSize: this.page.size
      }
      getMangerList(params).then(res => {
        if (res.status) {
          this.personList = res.data.pageData
          this.page.total = res.data.totalCount
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getAllRoleList () {
      let params = {
        // 'enabled':null,
        'name': null,
        'page': 1,
        'size': 1000
      }
      return findRoleByRoleQueryUsingPOST(params).then((res) => {
        if (res.status) {
          this.extendRoleList = [...res.data.list]
          this.extendRoleList.push({
            id: null,
            name: '全部角色'
          })
          this.allRoles = res.data.list
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    roleTransferChange (value, direction, movedKeys) {
      if (direction === 'left') {
        this.delRoleForUser(movedKeys)
      } else {
        this.addRoleForUser(movedKeys)
      }
    },
    addRoleForUser (roleIds) {
      addRoleForUserBySn(this.currentOperateItem.sn, roleIds).then(res => {
        if (!res.status) {
          this.getHasRoleList()
        } else {
          this.initPage()
        }
      })
    },
    delRoleForUser (roleIds) {
      deleteUserRoleBySn(this.currentOperateItem.sn, roleIds).then(res => {
        if (!res.status) {
          this.getHasRoleList()
        } else {
          this.initPage()
        }
      })
    },
    // 获取当前用户已有的角色
    getHasRoleList () {
      getUserRoleBySn(this.currentOperateItem.sn).then((res) => {
        if (res.status) {
          this.userRoles = res.data.map((item) => {
            return item.id
          })
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    showRoleManageDialog (item) {
      this.currentOperateItem = item
      this.getHasRoleList()
      this.dialogRoleManage = true
    },
    updateUserRole () {
      people()._updateUserRole({
        userId: this.currentOperateItem.id,
        roleIds: this.userRoles
      }).then((res) => {
        if (res.status) {
          this.$message.success('授权成功')
          this.dialogRoleManage = false
          this.initPage()
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    search () {
      this.page.current = 1
      this.page.size = 10
      this.initPage()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.initPage()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.initPage()
    }
  }
}
</script>
